			var mask=document.querySelector('#mask');
			var tips=document.querySelector('#tips');
			var wrap=document.querySelector('#wrap');
			var btn=document.querySelectorAll('.btn');
			var back=document.querySelector('#back');
			var restarts=document.querySelector('#restart');	
			var play=false;
			var score=0;
			var txtBtn=["top","right","left","bottom"];
			var checkPointArr=[{checkpoint:1,values:32},{checkpoint:2,values:128},{checkpoint:3,values:512},{checkpoint:4,values:2048}];
			
			var version=document.querySelector('.version');

			var txtColor;
			var bgColor;
			var rectangleArr=[];
			var cloneArr=[];
			var storageArr=[];
			var app=new PIXI.Application(500,500, {backgroundColor:0xb8af9e});			
			wrap.appendChild(app.view);			
			function init(){	//初始化函数
				version.onclick=function(){
					alert("当前版本添加了后退功能以及关卡介绍!")
				}
				restarts.onclick=function(){
					console.log(222)
					move('restarts');
				}
				back.onclick=function(){
					move('back');
				}
				btn.forEach(function(value,index){				
						var direction=txtBtn[index];
						value.onclick=function(){				
						move(direction);
					}	
				})
				mask.onclick=function(){
					console.log(13123)
					mask.style.display='none';
					score=0;
					tips.children[0].innerHTML="当前得分 : "+score;
					play=true;
					if(checkPointArr[0].values){
						tips.children[4].innerHTML="关卡"+ checkPointArr[0].checkpoint+"--合成:"+checkPointArr[0].values;
					}
					
				}
				
				for(let i=0;i<16;i++){
					var rectangle=new PIXI.Graphics();  
					rectangle.beginFill(0xccc0b2);
					rectangle.drawRoundedRect((i%4)*120+20, Math.floor(i/4)*120+20, 100, 100, 15);
					rectangle.endFill();
					rectangle.value=0;			//默认值为0
					rectangle.Location={x:(i%4)*120+20,y:Math.floor(i/4)*120+20};	//分配位置
					rectangleArr.push(rectangle);									//添加到数组		
					app.stage.addChild(rectangle);									
				}
				randomBlock();			//生成一个随机块(有数字的2或者4)
				randomBlock();
				for(let i=0;i<16;i++){		//存储
					if(rectangleArr[i].value){
						cloneArr.push([i,rectangleArr[i].value]);
					}
				}
			    storageArr.unshift(cloneArr.slice(0));
			    cloneArr.length=0;
			}
			function randomBlock(){
		        var zero = [];
		        for(var i = 0; i < 16; i++){			//把值为0的方块添加到zero数组 在里面随机一个
		            if(rectangleArr[i].value == 0){
		                zero.push(rectangleArr[i]);
		            }
		        }
		        if(zero.length!=0){
		        	var randomLocation = zero[Math.floor(Math.random() * zero.length)]; //随机矩形
			        var randomNumbers=Math.random() < 0.8 ? 2 : 4;			            //生成随机数字
					setBlock(randomLocation,randomNumbers);
			    }
		   }
			function fallback(){
				if(storageArr.length>=2){					
					for(let i=0;i<storageArr[1].length;i++){
						setBlock(rectangleArr[storageArr[1][i][0]],storageArr[1][i][1]);
					}
				}
			}
			function merge(prevBlock, currBlock){				//合并方块
		        var prevVal = prevBlock.value;
		        var currVal = currBlock.value;
		        if(currVal != 0){
		            if(prevVal == 0){
		                setBlock(prevBlock, currVal);
		                setBlock(currBlock, 0);
		            }
		            else if(prevVal == currVal){
		                setBlock(prevBlock, prevVal * 2);
		                setBlock(currBlock, 0);
		                score+=prevVal * 2;
		                tips.children[0].innerHTML="当前得分 :"+score;
		            }
		        }
		   }
			function setBlock(item,values){						//设置方块
			
   

				if(item.texts){									//如果已经有文字的 ，让他为空
					item.texts.text='';
				}
				if(values==0){									//如果值等于0 就 设置成默认样式
					item.clear();
					item.value=0;
					item.beginFill(0xccc0b2);
					item.drawRoundedRect(item.Location.x, item.Location.y, 100, 100, 15);
					item.texts.text='';
					
				}else{
					item.value=values;								//值不等于0的情况					
					chooseColor(values);
					item.beginFill(bgColor);
					item.drawRoundedRect(item.Location.x, item.Location.y, 100, 100, 15);		
				    var basicText = new PIXI.Text(values,{fontFamily: 'Arial',  
														    fontSize: '40px',  
														    fontWeight: 'bold',  
														    fill: txtColor,  
														    stroke: '#4a1850',  
														    strokeThickness: 5,  
														    dropShadow: true,  
														    dropShadowColor: '#000000',  			    
														    dropShadowDistance: 2,  }   
				    );
				    basicText.x = item.Location.x+35;				    
				    if(values>1000){
				    	basicText.x = item.Location.x;
				    }else if(values>100){
				    	basicText.x = item.Location.x+15;
				    }else if(values>10){
				    	 basicText.x = item.Location.x+25;
				    }					
					basicText.y = item.Location.y+20;
					item.texts=basicText;
			        app.stage.addChild(basicText);	        
				}	
					
			}
			
			function move(direction){
				if(!over()&&play){
				var j;
				switch(direction){
	            case 'top':
	                for(var i = 4, len = rectangleArr.length; i < len; i++){
	                    j = i;
	                    while(j >= 4){
	                        merge(rectangleArr[j - 4], rectangleArr[j]);
	                        j -= 4;
	                    }
	                }
	                 randomBlock();
				for(let i=0;i<16;i++){
					if(rectangleArr[i].value){
						cloneArr.push([i,rectangleArr[i].value]);
					}
				}
				
			    storageArr.unshift(cloneArr.slice(0));
			      cloneArr.length=0;
	                break;
	            case 'bottom':
	                for(var i = 11; i >= 0; i--){
	                    j = i;
	                    while(j <= 11){
	                       merge(rectangleArr[j + 4], rectangleArr[j]);
	                        j += 4;
	                    }
	                }
	                 randomBlock();
						for(let i=0;i<16;i++){
						if(rectangleArr[i].value){
							cloneArr.push([i,rectangleArr[i].value]);
						}
					}
					
				    storageArr.unshift(cloneArr.slice(0));
			      cloneArr.length=0;
	                break;
	            case 'left':
	                for(var i = 1, len = rectangleArr.length; i < len; i++){
	                    j = i;
	                    while(j % 4 != 0){
	                        merge(rectangleArr[j - 1], rectangleArr[j]);
	                        j -= 1;
	                    }
	                }
	                 randomBlock();
//	                  storageArr.unshift(rectangleArr.concat());
					for(let i=0;i<16;i++){
					if(rectangleArr[i].value){
						cloneArr.push([i,rectangleArr[i].value]);
					}
				}
				
			    storageArr.unshift(cloneArr.slice(0));
			    cloneArr.length=0;
	                break;
	            case 'right':
	                for(var i = 14; i >= 0; i--){
	                    j = i;
	                    while(j % 4 != 3){
	                        merge(rectangleArr[j + 1], rectangleArr[j]);
	                        j += 1;
	                    }
	                }
	                 randomBlock();
//	                  storageArr.unshift(rectangleArr.concat());
					for(let i=0;i<16;i++){
					if(rectangleArr[i].value){
						cloneArr.push([i,rectangleArr[i].value]);
					}
				}
				
			    storageArr.unshift(cloneArr.slice(0));
			    cloneArr.length=0;
	                break;
	            case 'restarts':
					clean();
					break;
				case 'back':
				if(storageArr.length>=2){
					for(var i = 0; i < 16; i++){
			        	if(rectangleArr[i].texts){
			        		rectangleArr[i].texts.text='';
			        	}
						rectangleArr[i].value=0; 
						rectangleArr[i].clear();
						rectangleArr.length=0;
						
						
						for(let i=0;i<16;i++){
							var rectangle=new PIXI.Graphics();  
							rectangle.beginFill(0xccc0b2);
							rectangle.drawRoundedRect((i%4)*120+20, Math.floor(i/4)*120+20, 100, 100, 15);
							rectangle.endFill();
							rectangle.value=0;			//默认值为0
							rectangle.Location={x:(i%4)*120+20,y:Math.floor(i/4)*120+20};	//分配位置
							rectangleArr.push(rectangle);									//添加到数组		
							app.stage.addChild(rectangle);									
						}	
		       }
					fallback();
					
						storageArr.shift();	
					}
									
	            	break;
		        }
		      	
		      }
			}			
			function keyDown(event){		//键盘事件
				
//				if(!over()&&play){
					var evt=window.event;
					switch(evt.keyCode){
						case 37:
							move('left');		
							break;
						case 38:
							move('top');
							break;
						case 39:
							move('right');
							break;
						case 40:
							move('bottom');
							break;
					}
//				}				
			}

		
							
	
			function over(){
				for(var i = 0; i < 16; i++){
	       			if(checkPointArr.length){
	       				 if(rectangleArr[i].value >= checkPointArr[0].values){
			            	layer.open({
			            		style: 'padding:10px;font-size:30px;border-radius:15px;'
							    ,content: "恭喜您! 顺利完成第 "+checkPointArr[0].checkpoint+" 次挑战"
							    ,btn: '我知道了'
							    
							  });
			            	var nums=checkPointArr[0].checkpoint+1;
							restart('点击屏幕<br/><br/>开启第'+ nums+'次挑战');
							checkPointArr.shift();
			               
			            }
	       				
	       			}else if(rectangleArr[i].value==2048){	       				
	       				layer.open({
							    content:"恭喜您!<br/><br/>闯关成功!<br/>"
							    ,btn: '我知道了'
							    ,style: 'padding:10px;font-size:30px;text-shadow:5px 5px 5px gray;border-radius:15px;'
							  });
	       				 return true;
	       			}
				}
		        for(var i = 0; i < 16; i++){
		            if(rectangleArr[i].value == 0){
		                return false;
		            }
		            if(i % 4 != 3){
		                if(rectangleArr[i].value==rectangleArr[i + 1].value){
		                    return false;
		                }
		            }
		            if(i < 12){
		                if(rectangleArr[i].value==rectangleArr[i + 4].value){
		                    return false;
		                }
		            }
		       }
		      
				restart('游戏失败<br/><br/>点击重新开始');
		        return true;
		    }
			function restart(value){						//重新开始游戏
				play=false;
				clean();
		        mask.style.display='block';
		        mask.children[1].innerHTML=value;
		        mask.children[2].style.display="none";
			}
		    function clean(){									
		        for(var i = 0; i < 16; i++){
		        	if(rectangleArr[i].texts){
		        		rectangleArr[i].texts.text='';
		        	}
					rectangleArr[i].value=0; 
					rectangleArr[i].clear();
					rectangleArr.length=0;
					init();
		        }
		       
		    }
			function chooseColor(value){
				var bgColors={
					"2":"0xeee4da",
					"4":"0xece0c8",
					"8":"0xf2b179",
					"16":"0xf59563",
					"32":"0xf57c5f",
					"64":"0xf65d3b",
					"128":"0xedce71",
					"256":"0xedcc61",
					"512":"0xecc850",
					"1024":"0xedc53f",
					"2048":"0xeec22e"
				}
				txtColor="0xfff7eb";
				if(value==2||value==4){
					txtColor="0x7c736a"
				}
				bgColor=bgColors[value];			
			}		
			window.onload=function(){
				init();
				window.onkeydown=keyDown;
			}
			
  function getType(o)
    {
        var _t;
        return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
    }
    function extend(destination,source)
    {
        for(var p in source)
        {
            if(getType(source[p])=="array"||getType(source[p])=="object")
            {
                destination[p]=getType(source[p])=="array"?[]:{};
                arguments.callee(destination[p],source[p]);
            }
            else
            {
                destination[p]=source[p];
            }
        }
    }